<template>
  <div class="mid-block flex-column">
    <img :src="data.img_url" class="image" />
    <img :src="tagSrc" class="tag" />
    <p class="content">{{data.content}}</p>
  </div>
</template>

<script>
export default {
  name: 'MidBlock',
  data () {
    return {
    }
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    tagSrc () {
      switch (this.data.type) {
        case 100:
          return 'https://7465-test-1082be-1257701543.tcb.qcloud.la/films/film@2x.png?sign=233d57a6191064bc8ee3cd2353e12422&t=1538310484'
        case 300:
          return 'https://7465-test-1082be-1257701543.tcb.qcloud.la/poetry/诗句.png?sign=98bb4487ebbec185cfb26e07c6b200db&t=1538310468'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .mid-block
    justify-content center
    .image
      width 750rpx
      height 500rpx
    .tag
      position relative
      bottom 58rpx
      right 310rpx
      width 46rpx
      height 142rpx
    .content
      max-width 550rpx
      font-size 36rpx
</style>
